<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蓉车宝</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <link rel="stylesheet" type="text/css" href="city/city.css">
    <link rel="stylesheet" type="text/css" href="css/shoppingCar.css">
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script/home_ban.js"></script>
    <script type="text/javascript" src="script/eg_top_search.js"></script>
    <script type="text/javascript" src="script/city.js"></script>
    <script type="text/javascript" src="script/snncar.js"></script>
    <script type="text/javascript" src="script/jquery.SuperSlide.2.1.1.js"></script>
    <!--引入vue和Axios.js 先导入vue  再导入axios -->
    <script src="script/vue.js"></script>
    <script src="script/axios.js"></script>
    <script src="comment/main.js"></script>

    <!--导航登陆网页版下拉-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".egc-top .nav-cent .operate").hover(function () {
                var _this = $(this);
                setTime = setTimeout(function () {
                    _this.find(".sec-version").slideDown(200);
                    _this.find("i").removeClass("icon-angle-down").addClass("icon-angle-up");
                }, 200);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".egc-top .nav-cent .sec-version").slideUp(200);
                $(".egc-top .nav-cent .operate i").removeClass("icon-angle-up").addClass("icon-angle-down");
            });
        });
    </script>

    <!--下拉导航关闭-->
    <script type="text/javascript">
        $(function () {
            $('.menu-mb i').click(function () {
                $(".navigation-mb-list").slideDown(300);
            });
            $('.navigation-mb-list .list-close-btn').click(function () {
                $(".navigation-mb-list").slideUp(300);
            });
        });
    </script>

    <script type="text/javascript">
        $(function () {
            var scroll_heitht = $('body').offset().top;
            var isShow = true;
            $(window).scroll(function () {
                if ($(window).scrollTop() > scroll_heitht && isShow) {
                    $('.stress-search-box').slideDown(200);
                } else {
                    $('.stress-search-box').slideUp(200);
                }
            });
            $('.stress-close a').click(function () {
                isShow = false;
                $('.stress-search-box').slideUp(200).unbind(window, aa);
            });
        });
    </script>
</head>
<body>
<div id="userDiv">
    <div class="egc-top">
        <div class="nav-cent">
            <div class="top-r">
          <span id="noLoginSpan">
            <a href="javascript:void(0)" id="b-regist">注册</a>
            |
            <a href="#" id="b-login" class="b-login">登陆</a>
            |
             <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx03bd86056bd3fc0e&redirect_uri=http://wx.rongcarservice.com/callback.html&response_type=code&scope=snsapi_login&state=123456#wechat_redirect"
                id="b-wx-login">微信登陆</a>
            |
            <a href="/shoppingCar.html">购物车</a>
          </span>
                <span id="loginSpan" style="display: none;">
              欢迎您!
              <a href="#" id="b-logout" class="b-login">登出</a>
          </span>
            </div>
            <div class="top-l">全国统一客服热线：XXX</div>
            <div class="clear_fix"></div>
        </div>
    </div>
    <div class="w">
        <div class="cart-filter-bar" style="color: red;font-weight: bold;font-size: 16px;">
            <ul class="switch-cart">
                <li class="switch-cart-item">
                    <a href="#none" style="color: red;"><em>全部商品</em>
                        <span class="number" style="margin-left: 10px;">{{total}}</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="clr"></div>
        <div class="cart-thead" >
            <div class="column t-checkbox">
                <div class="cart-checkbox" >
                    <input type="checkbox" name="select-all" class="jdcheckbox" :checked="checkedAll" @click="changeAllState"
                           clstag="pageclick|keycount|Shopcart_CheckAll|0">
                </div>
                全选
            </div>
            <div class="column t-goods">商品</div>
            <div class="column t-props">&nbsp;</div>
            <div class="column t-price">单价</div>
            <div class="column t-quantity">数量</div>
            <div class="column t-sum">小计</div>
            <div class="column t-action">操作</div>
        </div>
        <div class="cart-tbody" v-for="(cart,index) in cartList">
            <div class="shop">
                <div class="cart-checkbox">
                    <input type="checkbox" name="checkShop" class="jdcheckbox" @click="checkShopProduce(index,cart.checked)" :checked="cart.checked">
                </div>
                <span class="shop-txt">
                    <a href="//mall.jd.com/index-10662258.html" class="shop-name" target="_blank"
                                        rel="noreferrer" data-vendorid="10907465"
                                        clstag="pageclick|keycount|Shopcart_Shopid|10907465">
                        <i class="vendor-icon undefined" title="">
                        </i>{{cart.shopName}}
                    </a>
                    <i class="ml5 btn-im"></i>
                </span>
            </div>
            <div class="item-list" v-for="product in cart.shoppingCartList">
                <div class="item-combine">
                    <div class="item-item item-seleted" id="10033665972623" data-sku="10033665972623"
                         data-ts="1681211004188" data-skuuuid="F1yA4r1202690684881702912">
                        <div class="item-form">
                            <div class="cell p-checkbox">
                                <div class="cart-checkbox">
                                    <input type="checkbox" name="checkItem" class="jdcheckbox" :checked="product.state" @click="changeState(product)">
                                    <span class="line-circle"></span>
                                </div>
                            </div>
                            <div class="cell p-goods">
                                <div class="goods-item">
                                    <div class="p-img ">
                                        <a href="http://115.159.217.249:8888/group1/M00/00/01/rBEAA2MZrEaAfCaBAAHt5Ab1hek479.jpg" target="_blank" rel="noreferrer" title="宝马2020 x3贱卖">
                                            <img style="width: 80px;height: 80px;" :src="product.cover" :alt="product.title">
                                        </a>
                                    </div>
                                    <div class="p-msg">
                                        <div class="p-name">
                                            <a href="" target="_blank" rel="noreferrer" :title="product.title"
                                                 clstag="pageclick|keycount|Shopcart_Productid|10033665972623_9">
                                                <i class="product-icon " title=""></i>
                                                {{product.title}}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cell p-props">
                                <div class="props-txt"><span class="">{{product.typeName}}</span></div>
                            </div>
                            <div class="cell p-price">
                                <span class="p-price-cont">￥<span>{{product.costprice}}</span></span>
                            </div>
                            <div class="cell p-quantity" style="margin-left:63px;">
                                <div class="cart-number quantity ">
                                    <button class="cart-number-dec is-disabled" @click="subNum(product)" :disabled="product.num <= 1">
<!--                                         disabled="disabled"-->
                                        <i class="cart-icon-subt">-</i>
                                    </button>
                                    <div class="cart-input">
                                        <input class="cart-input-o" min="1" max="3" @blur="changeNum(product)" v-model="product.num">
                                    </div>
                                    <button class="cart-number-inc" @click="addNum(product)">
                                        <i class="cart-icon-add">+</i>
                                    </button>
                                </div>
                            </div>
                            <div class="cell p-sum"><strong>¥{{product.costprice*product.num}}</strong></div>
                            <div class="cell p-ops" style="margin-left: 34px;">
                                <a href="javascript:void(0)" @click="deleteProduct(product)" class="p-ops-item" clstag="pageclick|keycount|Shopcart_Delete|10033665972623">删除</a>
                            </div>
                        </div>
                        <div class="product-extra mb10"></div>
                        <div class="item-line"></div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div style="padding-bottom: 52px;"></div>
                <div class="cart-floatbar cart-floatbar-fixed"
                     style="position: fixed; transform: translateZ(0px); top: auto; bottom: 0px;">
                    <div class="cart-floatbar">
                        <div class="cart-toolbar">
                            <div class="toolbar-wrap"><input type="hidden" id="checkedCartState" value="1">
                                <div class="selected-item-list hide" style="display: none;"></div>
                                <div class="options-box">
                                    <div class="left">
                                        <div class="select-all"><input type="checkbox" class="jdcheckbox" @click="changeAllState" :checked="checkedAll"
                                                                       clstag="pageclick|keycount|Shopcart_CheckAll|0">全选
                                        </div>
                                        <div class="operation"><a href="javascript:void(0)" @click="removeCheckedProduct" class="opt-batch-remove">删除选中的商品</a>
                                            <a href="#none" class="opt-batch-follow">移入关注</a>
                                            <a href="javascript:void(0)" @click="removeAllProduct" class="opt-cleaner" title="亲，点我可快速清空购物车商品哦！">
                                                <strong>清空购物车</strong>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="right">
                                        <div class="combine">
                                            <div class="btn-area"><a class="common-submit-btn" href="#none"
                                                                     clstag="pageclick|keycount|Shopcart_Pay|0">去结算<b></b></a>
                                            </div>
                                            <div class="price-sum">
                                                <div>
                                                    <div class="price-sum-amount">
                                                        <div class="price-show"><span class="txt">总价：</span><span
                                                                class="price priceShow"><em>￥6.15</em></span><b
                                                                class="ml5 price-tips"></b>
                                                            <div class="price-tipsbox-new">
                                                                <div class="ui-tips-main">不含运费及送装服务费</div>
                                                                <span class="price-tipsbox-arrow"></span></div>
                                                        </div>
                                                        <span class="amount-sum">已选择<em>1</em>件商品<b
                                                                class="up"></b></span></div>
                                                    <div class="price-sum-extra"></div>
                                                </div>
                                            </div>
                                            <div class="clr"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clr"></div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#userDiv',
        data: {
            total:0,
            cartList:[],
            checkedAll:false,
            loginUser:localStorage.getItem("loginUser") ? JSON.parse(localStorage.getItem("loginUser")) : {}
        },
        methods:{
            // 删除用户名下的的所有的商品
            removeAllProduct(){
                let userId = this.loginUser.id;
                let flag = confirm("确定要清空购物车吗？")
                if (flag){
                    this.$http.post("/shoppingCart/deleteAllShop",{userId})
                        .then(res=>{
                            res = res.data;
                            if (res.success){
                                this.loadShoppingCart();
                                this.cartList = []
                            }else{
                                alert(res.msg);
                            }
                        })
                        .catch(err=>{
                            alert("网络异常");
                        })
                }
            },
            // 删除选中的商品
            removeCheckedProduct(){
                let flag = confirm("确定删除选中的商品吗？")
                if (flag){
                    let userId = this.loginUser.id
                    let carIds = [];
                    this.cartList.forEach(item=>{
                        item.shoppingCartList.forEach(it=>{
                            if (it.state == 1){
                                carIds.push(it.carId);
                            }
                        })
                    })
                    this.$http.post("/shoppingCart/batchChecked", {userId,carIds})
                        .then(res=>{
                            res = res.data;
                            if (res.success){
                                alert("移出成功！");
                                this.loadShoppingCart();
                            }else{
                                alert(res.msg);
                            }
                        })
                        .catch(err=>{
                            alert("网络异常");
                        })
                }
            },
            // 全选所有商品
            changeAllState(){
                let userId = this.loginUser.id;
                var state;
                var checkedAll = this.checkedAll;
                if (checkedAll){
                    this.checkedAll = false;
                    state = 0;
                }else{
                    this.checkedAll = true;
                    state = 1;
                }
                this.$http.post("/shoppingCart/updateAllShop",{userId,state})
                    .then(res=>{
                        res = res.data;
                        if (res.success){
                            this.loadShoppingCart();
                        }else{
                            alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        alert("网络异常");
                    })
            },
            // 全选整个店铺下的商品
            checkShopProduce(index,checked){
                this.cartList[index].checked = !checked
                this.cartList[index].shoppingCartList.forEach(item=>{
                    item.state = !checked;
                })
                var product = this.cartList[index];
                let {shopId} = product;
                let userId = this.loginUser.id;
                state = !checked
                state ? state = 1 : state = 0;
                this.$http.post("/shoppingCart/updateShoppingOnShop",{shopId,userId,state})
                    .then(res=>{
                        res = res.data;
                        if (res.success){
                            this.loadShoppingCart();
                        }else{
                            alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        alert("网络异常");
                    })
            },
            // 修改数量
            changeNum(product){
                this.$http.put("/shoppingCart",product)
                    .then(res=>{
                        res = res.data;
                        if (res.success){
                            this.loadShoppingCart();
                        }else{
                            alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        alert("网络异常");
                    })
            },
            subNum(product){
                product.id=null;
                product.num=-1;
                this.$http.put("/shoppingCart",product)
                    .then(res=>{
                        res = res.data;
                        if (res.success){
                            this.loadShoppingCart();
                        }else{
                            alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        alert("网络异常");
                    })
            },
            addNum(product){
                product.id=null;
                product.num=null;
                this.$http.put("/shoppingCart",product)
                    .then(res=>{
                        res = res.data;
                        if (res.success){
                            this.loadShoppingCart();
                        }else{
                            alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        alert("网络异常");
                    })
            },
            // 改变选择状态
            changeState(product){
                var state = product.state;
                if (state == 1){
                    product.state = 0;
                }else{
                    product.state = 1;
                }
                this.$http.put("/shoppingCart",product)
                    .then(res=>{
                        res = res.data;
                        if (res.success){
                            this.loadShoppingCart();
                        }
                    })
                    .catch(err=>{
                        alert("网络异常");
                    })
            },
            // 删除
            deleteProduct(product){
                var isDelete = confirm("确认删除当前商品码？");
                if (isDelete){
                    let {carId,userId} = product;
                    this.$http.post("/shoppingCart/delete",{carId,userId})
                        .then(res=>{
                            res = res.data;
                            if (res.success){
                                alert("商品删除成功！");
                                this.loadShoppingCart();
                            }else{
                                alert(res.msg);
                            }
                        })
                        .catch(err=>{
                            alert("网络异常");
                        })
                }
            },
            // 加载数据
            loadShoppingCart(){
                this.$http.post("/shoppingCart/userCart",{userId:this.loginUser.id})
                    .then(res=>{
                        res = res.data;
                        this.total = 0;
                        if (res.success){
                            let checkedAllCount = 0;
                            if (res.data.length == 0){
                                alert("购物车为空，请前往添加商品");
                                this.checkedAll = false;
                                return
                            }
                            res.data.forEach(item=>{
                                let count = 0;
                                item.checked = false;
                                item.shoppingCartList.forEach(it=>{
                                    this.total++;
                                    if (it.state == 1){
                                        count ++;
                                    }
                                })
                                if (count == item.shoppingCartList.length){
                                    item.checked = true;
                                }
                                if (item.checked){
                                    checkedAllCount++;
                                }
                            })
                            if (checkedAllCount == res.data.length){
                                this.checkedAll = true;
                            }else{
                                this.checkedAll = false;
                            }
                            this.cartList = res.data;
                        }
                    })
                    .catch(err=>{
                        alert("网络异常！");
                    })
            }
        },
        mounted(){
            this.loadShoppingCart();
        }
    })
</script>
</body>
</html>